import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { Dispatch, bindActionCreators } from 'redux'
import { RootState } from 'src/redux'
//action
import * as WordUserAction from './reducer'

export interface WordUserDto {
    username: string
}
export type WordUserState = WordUserDto;

export interface WordUserProps {
    onFetch: typeof WordUserAction.fetch;
    state: WordUserState;
}

export const _WordUser: React.SFC<WordUserProps> = props => {
    const { state, onFetch } = props;
    const { username } = state;

    useEffect(() => {
        onFetch();
    }, [onFetch]);
    return (
        <div style={{ fontSize: "2em", paddingLeft: "1em" }}>
            {username}的 单词表 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上
        </div >
    )
}

//把状态中心的状态取回
const mapStateToProps = (state: RootState) => ({
    state: state.WordUserState,
})

const mapDispatchToProps = (dispatch: Dispatch) =>
    bindActionCreators({
        onFetch: WordUserAction.fetch
    }, dispatch)

/**
 * 得到当前过滤器并渲染 Link。
 */
const WordUser = connect(
    mapStateToProps,
    mapDispatchToProps
)(_WordUser)

export default WordUser